<template>
	<div ref="sTopNav" class="decorate-slideTopNav" :class="navBarFixed == true ? 'navBarWrap' :''">
    <div class="topNavBox" :style="styleObj">
     <div class="hiddenBox">
        <ul class="nav-box" :style="styleObj2">
        <li  :class="['nav-item',...itemClassName]" v-for="(item, index) in navList" :key="index" :style="[styleObj1]">
          <a href="javascript:;" @click="openLink(item.link)"><p :style="{color:item.titleColor,background:item.titleBackgroundColor}">{{item.showtitle}}</p> </a>
        </li>
      </ul>
     </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        navList: [],
        styleObj: {},
        styleObj1: {},
        styleObj2: {},
        itemClassName: [],
        navBarFixed: false,
        scrollTop: ''
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    mounted() {
      window.addEventListener('scroll', this.watchScroll)
      this.scrollTop = this.$refs.sTopNav.offsetTop
      // // console.log(this.tplItemData, 1111111)
      this.navList = this.tplItemData.dataset
      this.styleObj.padding = this.tplItemData.modulePadding + 'px 10px'
      this.styleObj.overflow = 'hidden'
      this.styleObj1.fontSize = this.tplItemData.fontSize + 'px'
      if (this.tplItemData.dataset.length === 1) {
        // console.log(1)
        this.itemClassName.push('col1')
      } else if (this.tplItemData.dataset.length === 2) {
        // console.log(2)
        this.itemClassName.push('col2')
      } else if (this.tplItemData.dataset.length === 3) {
        // console.log(3)
        this.itemClassName.push('col3')
      } else if (this.tplItemData.dataset.length === 4) {
        // console.log(4)
        this.itemClassName.push('col4')
      } else {
        // console.log('大于4')
        this.itemClassName.push('col4')
      }
    },
    methods: {
      watchScroll() {
        var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
        if (scrollTop > this.scrollTop) {
          this.navBarFixed = true
          // // console.log(scrollTop, this.scrollTop)
        } else {
          this.navBarFixed = false
        }
      },
  
      openLink(link){
        openPage(link)
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.watchScroll, false) // 移除监听
    }
  })
</script>

<style lang='scss'>
.decorate-slideTopNav{
  background: #FFF;
  // position: fixed;
  // top: 0;
  // left: 0;
  width: 100%;
  .topNavBox{
    box-sizing: border-box!important;
    overflow: hidden;
    width: 100%;
    overflow-y: auto;
    .hiddenBox{
      overflow: hidden;
      // overflow-x: auto;
      // overflow-y: hidden;
      .nav-box::-webkit-scrollbar {
        display: none;
        }
       .nav-box{
          display: flex;
          padding: 20px 0 10px;
          background: rgb(255, 255, 255);
          overflow-x: scroll;
          scrollbar-width: none; /* firefox */
          -ms-overflow-style: none; /* IE 10+ */
          li{
            width: 140px;
            text-align: center;
            flex-shrink: 0;
            white-space: nowrap;
            margin-right: 10px;
            a{
              display: block;
              width: 100%;
              text-align: center;
              margin-right: 10px;
              p{
                // padding: 2px 10px;
                box-sizing: border-box;
                margin-bottom: 6px;
                width: 100%;
                padding: 2px 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .col1{
            width: 90vw;
          }
          .col2{
            width: 49vw;
          }
          .col3{
            width: 33vw;
          }
          .col4{
            width: 24vw;
          }
          .col5{
            width: 22vw;
          }
        }
    }
  }
  &.navBarWrap {
    position:fixed;
    top:0;
    left: 0;
    z-index:999;
  }
}
</style>
